import React from 'react';

function resizable(Child) {
  return class Wrapper extends React.Component {
    constructor() {
      this.state = {
        size: [windiw.innerWidth, window.innerHeight]
      }
    }
  
    onResize = () => {
      this.setState({
        size: [windiw.innerWidth, window.innerHeight]
      });
    }
  
    componentDidMount() {
      window.addEventListener('resize', this.onResize);
    }
  
    componentWillUnmount() {
      window.removeEventListener('resize', this.onResize);
    }
  
    render() {
      return <Child size={this.state.size} />
    }
  }  
}

class Foo extends React.Component {
  render() {
    const [width, height] = this.props.size;
    return (
      <div>{width},{height}</div>
    )
  }
}

export default WrapperedFoo = resizable(Foo);

// http://react.caibaojian.com/docs/higher-order-components.html